<!--
 * 按钮
 * @作者: 陈老师儿~
 * @手机: 18560000860
 -->
<template>
    <view class="pure-button" :class="_classes" :style="_styles" :hover-class="hoverClass">
        <!-- 按钮内容 -->
        <view class="pure-button-content" v-if="!loading">
            <!-- #ifndef MP-JD -->
            <slot name="content">
                <!-- #endif -->

                <!-- Icon -->
                <!-- #ifndef MP-JD -->
                <slot name="icon">
                    <!-- #endif -->
                    <view class="pure-button-icon" v-if="icon">
                        <pure-icon :name="icon" :mode="iconMode"></pure-icon>
                    </view>
                    <!-- #ifndef MP-JD -->
                </slot>
                <!-- #endif -->

                <!-- Text -->
                <!-- #ifndef MP-JD -->
                <slot>
                    <!-- #endif -->
                    <view class="pure-button-text" v-if="text || subtext">
                        <text class="pure-button-text-main" v-if="text">{{ text }}</text>
                        <text class="pure-button-text-sub" v-if="subtext">{{ subtext }}</text>
                    </view>
                    <!-- #ifndef MP-JD -->
                </slot>
                <!-- #endif -->

                <!-- Right -->
                <!-- #ifndef MP-JD -->
                <slot name="right"></slot>
                <!-- #endif -->

                <!-- #ifndef MP-JD -->
            </slot>
            <!-- #endif -->
        </view>

        <!-- 按钮 loading -->
        <view class="pure-button-loading" v-else>
            <!-- #ifndef MP-JD -->
            <slot name="loading">
                <!-- #endif -->
                <view class="pure-button-loading-icon" v-if="loadingIcon">
                    <pure-icon :name="loadingIcon"></pure-icon>
                </view>
                <text class="pure-button-loading-text" v-if="loadingText">{{ loadingText }}</text>
                <!-- #ifndef MP-JD -->
            </slot>
            <!-- #endif -->
        </view>

        <!-- 原生按钮 -->
        <button
            class="pure-button-button"
            :form-type="formType"
            :open-type="openType"
            :hover-start-time="hoverStartTime"
            :hover-stay-time="hoverStayTime"
            :app-parameter="appParameter"
            :hover-stop-propagation="hoverStopPropagation"
            :lang="lang"
            :session-from="sessionFrom"
            :send-message-title="sendMessageTitle"
            :send-message-path="sendMessagePath"
            :send-message-img="sendMessageImg"
            :show-message-card="showMessageCard"
            :group-id="groupId"
            :guild-id="guildId"
            :public-id="publicId"
            :data-im-id="dataImId"
            :data-im-type="dataImType"
            :data-goods-id="dataGoodsId"
            :data-order-id="dataOrderId"
            :data-biz-line="dataBizLine"
            :disabled="disabled"
            @getphonenumber="handleGetPhoneNumber"
            @getuserinfo="handleGetUserInfo"
            @error="handleError"
            @opensetting="handleOpenSetting"
            @launchapp="handleLaunchApp"
            @contact="handleContact"
            @chooseavatar="handleChooseAvatar"
            @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
            @addgroupapp="handleAddGroupApp"
            @chooseaddress="handleChooseAddress"
            @chooseinvoicetitle="handleChooseInvoiceTitle"
            @subscribe="handleSubscribe"
            @login="handleLogin"
            @im="handleIM"
            @tap="handleClick"
        ></button>
    </view>
</template>

<script>
    export default {
        options: {
            // 将自定义节点设置成虚拟的
            // #ifndef MP-TOUTIAO
            virtualHost: true,
            // #endif

            // 组件样式隔离
            styleIsolation: "apply-shared",

            // 允许使用多个插槽
            multipleSlots: true
        }
    }
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // props
    const _props = defineProps(props);

    // emits
    const _emits = defineEmits([
        "getphonenumber",
        "getuserinfo",
        "error",
        "opensetting",
        "launchapp",
        "contact",
        "chooseavatar",
        "agreeprivacyauthorization",
        "addgroupapp",
        "chooseaddress",
        "chooseinvoicetitle",
        "subscribe",
        "login",
        "im",
        "onClick"
    ]);

    // calsses
    const _classes = computed(() => {
        const arr = [];

        // 禁用
        if (_props.disabled) arr.push(`pure-disabled`);

        // 有副文本
        if (_props.subtext) arr.push(`pure-button--has-subtext`);

        return arr;
    });

    // styles
    const _styles = computed(() => {
        const arr = [];
        return arr;
    });

    // 防抖定时器
    let timer;

    // 点击事件
    function handleClick() {
        // 开启了防抖
        if (_props.debounce) {
            // 定时器已存在，说明还在防抖时间内
            if (timer) {
                // 判断是否需要提示
                // 需要提示
                if (_props.debounceTip) {
                    uni.showToast({
                        title: _props.debounceTipText,
                        icon: "none",
                        mask: true
                    });
                }
            }

            // 定时器不存在，说明防抖时间已过
            else {
                // 触发点击事件
                _emits("onClick");

                // 设置防抖定时器
                timer = setTimeout(() => {
                    clearTimeout(timer);
                    timer = null;
                }, _props.debounceTime);
            }
        }

        // 未开启防抖
        else {
            // 触发点击事件
            _emits("onClick");
        }

    }

    // getPhoneNumber
    function handleGetPhoneNumber(e) {
        _emits("getphonenumber", e);
    }

    // getUserInfo
    function handleGetUserInfo(e) {
        _emits("getuserinfo", e);
    }

    // error
    function handleError(e) {
        _emits("error", e);
    }

    // openSetting
    function handleOpenSetting(e) {
        _emits("opensetting", e);
    }

    // launchApp
    function handleLaunchApp(e) {
        _emits("launchapp", e);
    }

    // contact
    function handleContact(e) {
        _emits("contact", e);
    }

    // chooseAvatar
    function handleChooseAvatar(e) {
        _emits("chooseavatar", e);
    }

    // agreePrivacyAuthorization
    function handleAgreePrivacyAuthorization(e) {
        _emits("agreeprivacyauthorization", e);
    }

    // addGroupApp
    function handleAddGroupApp(e) {
        _emits("addgroupapp", e);
    }

    // chooseAddress
    function handleChooseAddress(e) {
        _emits("chooseaddress", e);
    }

    // chooseInvoiceTitle
    function handleChooseInvoiceTitle(e) {
        _emits("chooseinvoicetitle", e);
    }

    // subscribe
    function handleSubscribe(e) {
        _emits("subscribe", e);
    }

    // login
    function handleLogin(e) {
        _emits("login", e);
    }
    // im
    function handleIM(e) {
        _emits("im", e);
    }
</script>

<style lang="scss" scoped>
    @import "./style.css";
</style>
